<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/layui.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./layui.js"></script>
  <script src="./js/jquery-3.5.1.js"></script>

  <!-- 登录 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/main_style.css">
  <!-- 登录 -->

  <!-- 注册 -->
  <!-- 注册 -->
  <title>Document</title>
</head>

<body>
  <!-- 内容主体区域 -->
  <div class="nav-container"
    style="width: 100%; height: 80px; padding-left: 150px; line-height: 80px; padding-right: 50px; position: fixed;top: 0;left: 0;z-index: 100;background-color: white;">
    <span>医院简介</span>
    <span>可用服务</span>
    <span>日程安排</span>
    <div class="login-register">
      <div class="login">
        <span>登录</span>
      </div>
      <span>|</span>
      <div class="register">
        <span>注册</span>
      </div>

    </div>

  </div>
  <div style="height: 80px; width: 100%;"></div>
  <div style="width: 100%;height: 98%;">
    <div class="layui-carousel" id="test1">
      <div carousel-item>
        <div><img src="image/doctor7.jpeg" alt=""></div>
        <div><img src="image/doctor2.jpeg" alt=""></div>
        <div><img src="image/doctor5.jpeg" alt=""></div>
        <div><img src="image/doctor6.jpeg" alt=""></div>
        <div><img src="image/doctor1.jpeg" alt=""></div>

      </div>
    </div>
    <!-- 条目中可以是任意内容，如：<img src=""> -->

    <script>
      layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
          elem: '#test1',
          width: '100%' //设置容器宽度
            ,
          height: '98%',
          arrow: 'always' //始终显示箭头
          //,anim: 'updown' //切换动画方式
        });
      });
    </script>


  </div>
  <!-- 内容主体 -->



  <!-- 登录 -->
  <div  id="login_win" class="form-border">
    <i id="login_close" class="layui-icon layui-icon-close" style="font-size: 20px; " ></i> 
    <form action="http://wwww.baidu.com" class="">
        <div class="form-group has-feedback head">
            <label for="head">账号登录</label>
            <hr>
            
        </div>
        <div class="form-group has-feedback">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                <input id="username" class="form-control" placeholder="请输入用户名" maxlength="20" type="text">
            </div>

            <span style="color:red;display: none;" class="tips"></span>
            <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>

        <div class="form-group has-feedback">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                <input id="password" class="form-control" placeholder="请输入密码" maxlength="20" type="password">
            </div>

            <span style="color:red;display: none;" class="tips"></span>
            <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>

        <div class="form-group">
            <input class="form-control btn btn-primary" id="submit" value="立&nbsp;&nbsp;即&nbsp;&nbsp;登&nbsp;&nbsp;录" type="submit">
        </div>

        <div class="form-group">
            <input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
        </div>
        <div class="form-group">
            <a  id="go_register" style="color:red">没有帐号?立即注册</a>
        </div>
    </form>
  </div>
  <!-- 登录 end-->


  <!-- 注册 -->
  <div id="register_win" class="form-border">
    <i id="register_close" class="layui-icon layui-icon-close" style="font-size: 20px; " ></i>
    <form action="http://wwww.baidu.com" class="">
        <div class="form-group has-feedback head">
            <label for="head">账号注册</label>
            <hr>
            
        </div>
        <div class="form-group has-feedback">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                <input id="username" class="form-control" placeholder="请输入用户名" maxlength="20" type="text">
            </div>

            <span style="color:red;display: none;" class="tips"></span>
            <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>

        <div class="form-group has-feedback">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                <input id="password" class="form-control" placeholder="请输入密码" maxlength="20" type="password">
            </div>

            <span style="color:red;display: none;" class="tips"></span>
            <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>

        <div class="form-group has-feedback">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                <input id="passwordConfirm" class="form-control" placeholder="请再次输入密码" maxlength="20" type="password">
            </div>
            <span style="color:red;display: none;" class="tips"></span>
            <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>




        <div class="row">
            <div class="col-xs-7">
                <div class="form-group has-feedback">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
                        <input id="idcode-btn" class="form-control" placeholder="请输入验证码" maxlength="4" type="text">
                    </div>
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="col-xs-5 div_idcode" style="padding-left: 5px;" >
                <div id="idcode" style="background: transparent;"></div>
            </div>
        </div>

        <div class="form-group has-feedback">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
                <input id="phoneNum" class="form-control" placeholder="请输入手机号码" maxlength="11" type="text">
            </div>
            <span style="color:red;display: none;" class="tips"></span>
            <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>

        <div class="row">
            <div class="col-xs-7">
                <div class="form-group has-feedback">
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
                        <input id="idcode-btn" class="form-control" placeholder="请输入校验码" maxlength="6" type="text">
                    </div>
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="col-xs-5 text-center"  >
                <button type="button" id="loadingButton" class="btn btn-primary" autocomplete="off">获取短信校验码</button>
            </div>
        </div>

        <div class="form-group">
            <input class="form-control btn btn-primary" id="submit" value="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" type="submit">
        </div>

        <div class="form-group">
            <input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
        </div>
        <div class="form-group">
            <a  id="go_login" style="color:red">已有帐号?立即登录</a>
        </div>
    </form>
</div>
  <!-- 注册 end-->

  <!-- 遮罩层 -->
<div id="overlay" >

  <!-- 遮罩层 -->
<script>

  // 鼠标悬停事件
    $(".login").hover(
    function(){
      $(".login").css('background-color',"#51b8f2");
      $(".login span").css('color',"#ffffff");
    },
    function(){
      $(".login").css('background-color',"#e4f5ff");
      $(".login span").css('color',"#51b8f2");
    }
  );
  $(".register").hover(
    function(){
      $(".register").css('background-color',"#51b8f2");
      $(".register span").css('color',"#ffffff");
    },
    function(){
      $(".register").css('background-color',"#e4f5ff");
      $(".register span").css('color',"#51b8f2");
    }
  );

// 鼠标悬停事件

// 登录事件
$(".login").on('click',function(){
  $("#login_win").css('display',"block");
  showOverlay();

});
$("#login_close").on('click',function(){
  $("#login_win").css('display',"none");
  hideOverlay();
});
$("#login_close").hover(
  function(){
    $("#login_close").css('color',"orange");
  },
  function(){
    $("#login_close").css('color',"#000000");
  }
);
// 登录事件end

// 注册事件
$(".register").on('click',function(){
  $("#register_win").css('display',"block");
  showOverlay();

});
$("#register_close").on('click',function(){
  $("#register_win").css('display',"none");
  hideOverlay();
});
$("#register_close").hover(
  function(){
    $("#register_close").css('color',"orange");
  },
  function(){
    $("#register_close").css('color',"#000000");
  }
);
// 注册事件end



// 注册转登录事件
$("#go_login").on('click',function(){
  $("#register_win").css('display',"none");
  $("#login_win").css('display',"block");
});
// 注册转登录事件end

// 登录转注册事件
$("#go_register").on('click',function(){
  $("#login_win").css('display',"none");
  $("#register_win").css('display',"block");
});
// 登录转注册事件end
</script>


<!-- 遮罩层 -->
<style>
  /* 半透明的遮罩层 */
#overlay {
    background: #000;
    filter: alpha(opacity=50); /* IE的透明度 */
    opacity: 0.5;  /* 透明度 */
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100; /* 此处的图层要大于页面 */
    display:none;
}
</style>
<script>
  /* 显示遮罩层 */
function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());

// fadeTo第一个参数为速度，第二个为透明度
// 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
$("#overlay").fadeTo(200, 0.5);
}

/* 隐藏覆盖层 */
function hideOverlay() {
$("#overlay").fadeOut(200);
}

/* 当前页面高度 */
function pageHeight() {
return document.body.scrollHeight;
}

/* 当前页面宽度 */
function pageWidth() {
return document.body.scrollWidth;
}



//登录
    $("#submit").on('click',function () {
        var username = $("#username").val();
        var password = $("#password").val();
        // alert(username);
        // alert(password);

        $.ajax({
            url: "user/login?username="+username + "&password=" + password,
            type: "get",
            contentType: 'application/text;charset=UTF-8',
            success: function (data) {

                if (data === '密码错误') {
                    layer.alert("密码错误")
                }
                if (data === '2') {
                    console.log('医生')
                    window.location.href="doctor/doctor_treat.html";
                }
                if (data === '1') {
                    window.location.href="patient/select_doctor.html";
                }
                if (data === '3') {
                    window.location.href="expense_management/medical_card.html";
                }if (data === '4') {
                    window.location.href="drug/drug_in_storage.html";
                }if (data === '0') {
                    window.location.href="doctor_pending.html";
                }
            },
        })

    })
</script>
<!-- 遮罩层 end -->

</body>



<script type="text/javascript" src="js/main.js"></script>

</html>